import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { Avatar, Button, Tag } from 'antd';
import { GithubOutlined, IdcardOutlined, ToolOutlined, HourglassOutlined } from '@ant-design/icons';
import { getCurrentUser } from './service';
import { history } from 'umi';


interface Props {}
const Header: FC<Props> = () => {
    const [user_id,setUserId]=useState(localStorage.getItem('user_id')||'')
    const [userInfo,setUserInfo]=useState({})
    const getUser = ()=>{
        getCurrentUser({user_id:user_id}).then((res)=>{
            console.log(res)
            setUserInfo(res.data)
        })
    }
     useEffect(()=>{
        getUser()
     },[])
  return (
    <div className={style.head_con}>
      <div className={style.head_con_top}>
        <div className={style.top_left}>
          <Avatar
            src={
              'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200'
            }
            className={style.photo}
            size="large"
            shape="circle"
          />
        </div>
        <div className={style.top_right}>
          <div className={style.author}>
            <Tag icon={<GithubOutlined />} color="#55acee">
              {localStorage.getItem('username')}
            </Tag>
            <Tag color="cyan">LV3</Tag>
            <Tag icon={<HourglassOutlined />} color="processing">入坑时间:{userInfo.createdAt?.split(' ')[0]}</Tag>
          </div>
          <div className={style.info}>
            <div className={style.info_detail}>
              <IdcardOutlined /> <span className={style.info_detail_margin}>前端开发工程师</span>
            </div>
            <div className={style.info_detail} style={{marginLeft:'30px'}}>
              <ToolOutlined /> <span className={style.info_detail_margin}>React python</span>
            </div>
          </div>
        </div>
      </div>
      <div className={style.head_con_bottom}>
        <Button type='primary' onClick={()=>{
            history.push('/client/userdetail');
        }}>编辑个人资料</Button>
      </div>
    </div>
  );
};

export default Header;
